<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

const feedback = {
  value: '',
  value2:''
}
</script>

<template>
  <div>
    <header>
      <a href="#" style="color: white; text-decoration: none;" @click="router.push('/settings')">&lt;</a>
      <span>意见反馈</span>
    </header>
    <p>为了给您带来更好的使用体验</p>
    <p>我们非常重视您的反馈并及时跟进</p>
    <form>
      <label for="feedback" style="display: block; margin-bottom: 5px;">反馈内容：</label>
      <textarea id="feedback" v-model="feedback.value" placeholder="请输入反馈内容" style="width: 100%; height: 80px; margin-bottom: 15px; padding: 8px;"></textarea>
      <label for="phone" style="display: block; margin-bottom: 5px;">手机号（选填）：</label>
      <input type="text" id="phone" v-model="feedback.value2" placeholder="请输入手机号" style="width: 100%; height: 35px; margin-bottom: 20px; padding: 8px;">
      <button type="button" @click="" class="submit-button" style="width: 100%; height: 40px; line-height: 40px;">提交反馈</button>
    </form>
  </div>
</template>

<style scoped>
.submit-button {
            background-color: #007bff;
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
          }
 header {
   background: linear-gradient(to right, #ff69b4, #00bfff);
   color: white;
   text-align: center;
   padding: 10px;
 }

</style>